<template>
  <div class="page-wrap">
    <div class="page-title">CdsBatchOperationDialog 批量操作弹框</div>
    <p class="page-description">该组件用于批量操作弹框显示，包含可操作性、不可操作项不同大类的内容</p>
    <div class="page-sub-title">基本用法</div>
    <codeShow :code="code1">
      <el-button @click="showDialog">打开弹框</el-button>
      <CdsBatchOperationDialog 
        :visible="visible"
        @close="visible=false"
        :closeClick="closeClick"
        :closeEsc="closeEsc"
        title='测试弹框'
        :typeList="typeList"
        :keyMap="keyMap"
        @tabChange="tabChange"
        >
        <template #text>
          提示性文字插槽
        </template>
        <template #footer>
          <div class="dia-bottom">
            <el-button type="primary" @click="confirm">确认</el-button>
            <el-button @click="visible = false">取消</el-button>
          </div>
        </template>
      </CdsBatchOperationDialog>
    </codeShow>
    <div class="page-sub-title">cdsRegion API</div>
    <el-table :data="cdsBatchOperationDialog" style="margin-top:20px;margin-bottom: 48px;">
        <el-table-column label="属性名" align="left" width="150" prop="attr"></el-table-column>
        <el-table-column label="说明" align="left" prop="illustrate"></el-table-column>
        <el-table-column label="类型" align="left" width="150" prop="type"></el-table-column>
        <el-table-column label="默认值" align="left" width="150" prop="default"></el-table-column>
        <el-table-column label="是否必传" align="left" width="150" prop="isRequired"></el-table-column>
    </el-table>
    <div class="page-sub-title">typeList</div>
    <el-table :data="typeListData" style="margin-top:20px;margin-bottom: 48px;">
        <el-table-column label="类型" align="left" width="150" prop="type"></el-table-column>
        <el-table-column label="说明" align="left" prop="illustrate"></el-table-column>
    </el-table>
  </div>
</template>
<script setup>
// import { CdsBatchOperationDialog } from 'cds-ui-business-components'
// import CdsBatchOperationDialog from '../../../../packages/businessComponents/cdsBatchOperationDialog/src/cdsBatchOperationDialog'
import { ref, defineAsyncComponent } from 'vue';
import codeShow from '../../components/code.vue'

const CdsBatchOperationDialog = defineAsyncComponent(() => import('../../../../packages/businessComponents/cdsBatchOperationDialog'))

const closeClick = ref(false)
const closeEsc = ref(false)
const visible = ref(false)
const typeList = ref({
  '测试1': [
    {value: 'value1', label: 'label1'},
    {value: 'value2', label: 'label2'},
    {value: 'xsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasd', label: 'label3'},
    {value: 'value2', label: 'label2'},
    {value: 'value2', label: 'label2'},
    {value: 'value2', label: 'label2'},
    {value: 'value2', label: 'label2'},
    {value: 'value2', label: 'label2'},
    
  ],
  '测试2': [
    {value: 'value3', label: 'label3'},
    {value: 'value4', label: 'label4'}
  ],
  '测试3': [
    {value: 'value5', label: 'label5'},
  ]
})
const keyMap = {
  name: 'value',
  id: 'label'
}
const code1 = `
<CdsBatchOperationDialog 
  :visible="visible"
  @close="visible=false"
  :closeClick="closeClick"
  :closeEsc="closeEsc"
  title='测试弹框'
  :typeList="typeList"
  :keyMap="keyMap"
  @tabChange="tabChange"
  >
  <template #text>
    提示性文字插槽
  </template>
  <template #footer>
    <div class="dia-bottom">
      <el-button type="primary" @click="confirm">确认</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </template>
</CdsBatchOperationDialog>

const typeList = ref({
  '测试1': [
    {value: 'value1', label: 'label1'},
    {value: 'value2', label: 'label2'},
    {value: 'xsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasdxsadasd', label: 'label3'},
    {value: 'value2', label: 'label2'},
    {value: 'value2', label: 'label2'},
    {value: 'value2', label: 'label2'},
    {value: 'value2', label: 'label2'},
    {value: 'value2', label: 'label2'},
    
  ],
  '测试2': [
    {value: 'value3', label: 'label3'},
    {value: 'value4', label: 'label4'}
  ],
  '测试3': [
    {value: 'value5', label: 'label5'},
  ]
})
const keyMap = {
  name: 'value',
  id: 'label'
}
`;

const cdsBatchOperationDialog = [
  {'attr': 'visible', 'illustrate': '弹框显示控制', 'type': 'Boolean', 'default': 'false', 'isRequired': '必传'},
  {'attr': 'typeList', 'illustrate': '具体见下表', 'type': 'Object', 'default': '{}', 'isRequired': '必传'},
  {'attr': 'keyMap', 'illustrate': 'typeList-value中数组映射', 'type': 'Object', 'default': '{}', 'isRequired': '必传'},
  {'attr': 'closeClick', 'illustrate': '点击空白关闭弹框', 'type': 'Boolean', 'default': 'false', 'isRequired': '非必传'},
  {'attr': 'closeEsc', 'illustrate': 'esc关闭弹框', 'type': 'Boolean', 'default': 'false', 'isRequired': '非必传'},
]
const typeListData = [
  {'type': 'Object', 'illustrate': '操作项列表(key代表tab显示内容,value为对象数组格式)。value为数组对象，对象中组件默认接收两个属性:name和id，如过当前数据结构中不符合，可以通过keyMap设置映射，具体参考实例代码'},
]

const showDialog = () => {
  console.log('执行')
  visible.value = true
}
const confirm = () => {
  visible.value = false
}
const tabChange = (index) => {
  console.log('index', index)
}
</script>
<style scoped>
.dia-bottom {
  display: flex;
  justify-content: flex-end;
}
</style>